<template>
  <lay-card>

    <template v-slot:body>
      <!-- <lay-row>
        <lay-col>
          <lay-table :loading="config.loading" :columns="config.columns" :page="config.page" @change="change"
            :data-source="config.data" class="project-grids">

            <template #toolbar>
                <lay-input v-model="config.search.name" size="sm" placeholder="搜索" suffix-icon="layui-icon-search" style="width: 20%;"></lay-input>
       
              <lay-button-group v-for="n in listbutton.toolbarbuttons" :key="n">
                <lay-button :size="n.size" :type="n.status" border-style="dashed" @click="Events(n, null)"> {{ n.name
                }}</lay-button>
              </lay-button-group>
            </template>
            <template v-slot:operator="{ row }">
              <span v-for="n in listbutton.rowbuttons" :key="n">
                <lay-tooltip :content="n.name" position="bottom" :is-dark="true">
                  <button class="a-button type--button is--circle" circle @click="Events(n, row)">
                    <lay-icon :type="n.icon" :color="n.color">

                    </lay-icon>
                  </button>
                </lay-tooltip>

              </span>

            </template>
          </lay-table>
        </lay-col>


      </lay-row> -->
      <lay-container fluid="true" class="option-box">
    <lay-card>
      <lay-form style="margin-top: 10px">
        <lay-row>
          <lay-col :md="5">
            <lay-form-item label="用户账号" label-width="80">
              <lay-input
                v-model="config.search.name"
                placeholder="请输入"
                size="sm"
                :allow-clear="true"
                style="width: 98%"
              ></lay-input>
            </lay-form-item>
          </lay-col>
          <!-- <lay-col :md="5">
            <lay-form-item label="用户名" label-width="80">
              <lay-input
                v-model="searchQuery.userName"
                placeholder="请输入"
                size="sm"
                :allow-clear="true"
                style="width: 98%"
              ></lay-input>
            </lay-form-item>
          </lay-col> -->
          <!-- <lay-col :md="8">
            <lay-form-item label="登录时间" label-width="80">
              <lay-date-picker
                size="sm"
                v-model="config.search.startTime"
                range
                type="datetime"
                :placeholder="['开始日期', '结束日期']"
              ></lay-date-picker
            ></lay-form-item>
          </lay-col>
          <lay-col :md="5">
            <lay-form-item label-width="20">
              <lay-button
                style="margin-left: 20px"
                type="normal"
                size="sm"
                @click="toSearch"
              >
                查询
              </lay-button>
              <lay-button size="sm" @click="toReset"> 重置 </lay-button>
            </lay-form-item>
          </lay-col> -->
        </lay-row>
      </lay-form>
    </lay-card>
    <!-- table -->
    <div class="table-box">
      <lay-table
      :loading="config.loading" :columns="config.columns" :page="config.page" @change="change"
            :data-source="config.data"
      >
        <template #requestPath="{ row }">
          <lay-tooltip
            :visible="false"
            trigger="hover"
            :content="row.requestPath"
          >
            <div class="oneRow">{{ row.requestPath }}</div>
          </lay-tooltip>
        </template>

        <template #status="{ row }">
          <div v-show="row.status == '正常'">
            <lay-tag color="#2dc570" variant="light">正常</lay-tag>
          </div>
          <div v-show="row.status == '失败'">
            <lay-tag color="#F5319D" variant="light">失败</lay-tag>
          </div>
        </template>
        <template #time="{ row }">
          <div class="oneRow">{{ row.time }}s</div>
        </template>
        <template v-slot:toolbar> 
          <lay-input v-model="config.search.name" size="sm" placeholder="搜索" suffix-icon="layui-icon-search" style="width: 20%;"></lay-input>
       
       <lay-button-group v-for="n in listbutton.toolbarbuttons" :key="n">
         <lay-button :size="n.size" :type="n.status" border-style="dashed" @click="Events(n, null)"> {{ n.name
         }}</lay-button>
       </lay-button-group>

        </template>
        <template v-slot:operator="{ row }">
          <span v-for="n in listbutton.rowbuttons" :key="n">
                <lay-tooltip :content="n.name" position="bottom" :is-dark="true">
                  <button class="a-button type--button is--circle" circle @click="Events(n, row)">
                    <lay-icon :type="n.icon" :color="n.color">

                    </lay-icon>
                  </button>
                </lay-tooltip>

              </span>
        </template>
      </lay-table>
    </div>


  </lay-container>
    </template>
  </lay-card>
</template>
<script lang="ts">
export default {
  name: "mianwait"
}
</script>
<script lang="ts" setup>
import { ref, nextTick } from "vue";
import { layer } from "@layui/layer-vue";
import webosutils from 'webosutils';
import { useRoute } from 'vue-router';
import { ReleaseIcon } from '@layui/icons-vue';
import { useRouter } from 'vue-router';
import listurils from "../../../utils/listutils";
import { LayerForm} from 'webos-form-design';
const router = useRouter();
const route = useRoute();
const listbutton = ref({
  rowbuttons: [] as any,
  toolbarbuttons: [] as any,
});
const size=ref("sm");
const config = ref({
  loading: true,
  data: [],
  page: {
    total: 0,
    limit: 10,
    current: 1,
    showRefresh: true,
    limits: [10,20,50,100,200]
  },
  columns: [
    {
      title: "标题",

      key: "title"
    }, {
      title: "操作人",
      slot: "username",
      key: "username"
    }, {
      title: "发生时间",
      key: "writetime"
    }, {
      title: "IP地址",
      key: "ipaddress"
    }, {
      title: "操作",

      fixed: "right",
      customSlot: "operator",
      key: "operator"
    }
  ],
  api: "",
  search: {
    type: "",
    name: ""
  }
});

listurils.getButton(route.query.appid, config, listbutton).then((res: any) => {
  //加载完成后刷新列表

  if (res.success) {
    config.value.api = res.data.api;
    if(listbutton.value.toolbarbuttons.length>0){
      size.value=listbutton.value.toolbarbuttons[0].size;
    }
    listurils.searchEvent(config);
  } else {
    layer.notify({
      title: "Error",
      content: res.msg,
      icon: 2
    })
  }

});
const change = (p: any) => {

  config.value.page.current = p.current;
  config.value.page.limit = p.limit;
  listurils.searchEvent(config);
}
const Events = (ent: any, row: any) => {
  try {

    switch (ent.events) {
      case "searchEvent":
        if (config.value.page) {
          listurils.searchEvent(config);
        }

        break;
        case "deleteEvent": listurils.removeRowEvent(ent, row, listurils.searchEvent, config);
        break;

      case "previewEvent": listurils.previewEvent(LayerForm, ent, row);
        break;
    }
  } catch (e) {
    layer.msg("按钮解析失败", { icon: 3, time: 1000 })
  }

}
</script>
<style scoped>

</style>

